<template>
  <div class="forgetPsw">
    <div class="main">
      <div class="title">
        <i class="iconfont icon-guanbi" @click="isShowForget"></i>
        修改密码
      </div>
      <div class="formBox">
        <p>
          <label for="phone">手机号</label>
          <input type="text" placeholder="输入手机号" id="phone" v-model="userInfo.ID" maxlength="11">
        </p>
        <p>
          <label for="newPws">请输入新密码</label>
          <input
            type="password"
            placeholder="输入密码"
            id="newPws"
            v-model="userInfo.YJELQss"
            maxlength="15"
          >
        </p>
        <p>
          <label for="newPws2">再输入新密码</label>
          <input
            type="password"
            placeholder="再次输入密码"
            id="newPws2"
            v-model="newPassword2"
            maxlength="15"
          >
        </p>
        <p>
          <label for="yzcode" style="width:1.4rem">验证码</label>
          <input
            type="text"
            style="width:2.2rem;"
            placeholder="输入验证码"
            id="yzcode"
            v-model="userInfo.YJEYhNew"
            maxlength="6"
          >
          <button type="button" class="btn" v-if="!isShowCount" @click="getNewPsw('0')">获取验证码</button>
          <span class="btn1" v-if="isShowCount">{{count}}s后可重试</span>
        </p>
      </div>
      <div class="login" @click="getNewPsw('1')">确认修改</div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { changePsw } from "../../api";
import { Toast } from "mint-ui";
import { hex_md5 } from "../../utils/md5";

export default {
  name: "forgetPws",
  data() {
    return {
      userInfo: {
        ID: "",
        YJELQss: "",
        YJEYhOld: "",
        YJEYhNew: ""
      },
      newPassword2: "",
      count: 60,
      isShowCount: false
    };
  },
  mounted() {},
  methods: {
    ...mapActions(["isShowForget"]),
    getNewPsw(MC) {
      const pwdCheck = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,32}$/;
      if (!this.userInfo.ID) {
        Toast({
          message: "用户名不正确",
          duration: 2000
        });
        return;
      }
      if (MC && !pwdCheck.test(this.userInfo.YJELQss)) {
        Toast({
          message: "请输入8-32位数字+字母组合",
          duration: 2000
        });
        return;
      }
      if (MC && this.userInfo.YJELQss != this.newPassword2) {
        Toast({
          message: "两次密码不一致",
          duration: 2000
        });
        return;
      }
      changePsw({
        ID: this.userInfo.ID,
        YJELQss: hex_md5(this.userInfo.YJELQss),
        YJEYhOld: this.userInfo.YJEYhOld,
        YJEYhNew: this.userInfo.YJEYhNew,
        MC: MC
      }).then(res => {
        if (res.data.Success && MC == 0) {
          this.$set(this.userInfo, "YJEYhOld", res.data.EntityList[0].value1);
          this.isShowCount = true;
          let timer = setInterval(() => {
            if (this.count >= 0) {
              this.count--;
            } else {
              clearInterval(timer);
              this.isShowCount = false;
            }
          }, 1000);
        }
        if (res.data.Success && MC == 1) {
          this.isShowForget();
        }
        Toast({
          message: res.data.Content,
          duration: 2000
        });
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.forgetPsw {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  left: 0;
  top: 0;

  .main {
    width: 6.82rem;
    height: 10.32rem;
    border-radius: 0.1rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.26rem;
    box-sizing: border-box;

    .title {
      line-height: 1rem;
      border-bottom: 1px solid #898989;
      font-size: 16px;
      font-family: 'PingFang-SC-Medium';
      text-align: center;

      i {
        position: absolute;
        left: 20px;
      }
    }

    .formBox {
      margin: 60px 0;

      p {
        line-height: 0.66rem;
        margin: 0.4rem 0;

        label {
          font-size: 17px;
          display: inline-block;
          width: 2.2rem;
        }

        input {
          display: inline-block;
          height: 0.66rem;
          background: rgba(237, 237, 237, 1);
          border-radius: 0.1rem;
          padding-left: 5px;
          box-sizing: border-box;
        }

        .btn {
          width: 2.21rem;
          height: 0.66rem;
          background: #009CFF;
          color: #fff;
          border-radius: 0.1rem;
          margin-left: 0.1rem;
        }

        .btn1 {
          width: 2.22rem;
          height: 0.66rem;
          background: rgba(237, 237, 237, 1);
          color: #009CFF;
          border-radius: 0.1rem;
          margin-left: 0.1rem;
          padding: 0.12rem;
          position: relative;
          top: 2px;
          font-size: 14px;
        }
      }
    }

    .login {
      width: 6.2rem;
      height: 1.05rem;
      line-height: 1.05rem;
      text-align: center;
      color: #FFF;
      font-size: 22px;
      background: #009CFF;
      box-shadow: 0px 7px 27px 0px rgba(28, 0, 0, 0.32);
      border-radius: 0.1rem;
    }
  }
}
</style>

